{%- liquid
  case section.settings.background_color
    when 'primary'
      assign background_color = 'bg-primary'
      assign color_rgb = '#007AFF'
    when 'secondary'
      assign background_color = 'bg-secondary'
      assign color_rgb = '#007AFF'
    when 'inverse'
      assign background_color = 'bg-inverse'
      assign color_rgb = '#fafafa'
    when 'white'
      assign background_color = 'bg-white'
      assign color_rgb = '#fff'
    when 'black'
      assign background_color = 'bg-black'
      assign color_rgb = '#000'
  endcase

  case section.settings.text_colors
    when 'white'
      assign text_colors = 'text-body-inverse'
    else
      assign text_colors = ''
  endcase

  assign show_padding = true
  assign bg_full = true
  unless section.settings.add_background_color_to_the_full_section
    assign show_padding = false
    assign bg_full = false
  endunless
-%}

{% style %}
  .swiper-pagination-bullet-active::after {
    --back-color: {{ color_rgb }};
  }
{% endstyle %}

<link rel="stylesheet" href="{{ 'media-quotes-index.min.css' | asset_url }}">

<div class="{% if show_padding %}py-quotes{% else %}my-quotes{% endif %} {% if bg_full %}{{ background_color }}{% endif %} {{ text_colors }}">
  <input class="as-media-quotes-script" type="hidden" value="{{ 'media-quotes.min.js' | asset_url }}" {% if request.design_mode %}data-design-mode="yes"{% endif %}>
  <div class="as-media-quotes-container container">
    <div class="row justify-content-center align-items-center {% unless bg_full %}{{ background_color }}{% endunless %}">
      <div class="col-lg-10 col-12">
        <input class="as-ifauto-rotate" type="hidden" value="{{ section.settings.auto_rotate_slides }}">
        <input class="as-rotation-interval" type="hidden" value="{{ section.settings.change_slides_every }}">
        <div class="as-swiper swiper">
          <div class="swiper-wrapper">
            {% for block in section.blocks %}
              <div class="as-swiper-slide swiper-slide flex-column">
                {%- if block.settings.logo != nil -%}
                  <div class="mb-4">
                    <img
                      class="img"
                      src="{{ block.settings.logo | img_url: 'master' }}"
                      alt="{{ block.settings.logo.alt | escape }}"
                    >
                  </div>
                {%- endif -%}
                {%- if block.settings.text != empty -%}
                  <div class="d-flex justify-content-center align-items-start">
                    <span class="l-mark">{% render 'icon-left-mark' %}</span>
                    <div class="content px-md-6 px-4">
                      <h4 class="mb-0">{{ block.settings.text }}</h4>
                    </div>
                    <span class="r-mark">{% render 'icon-right-mark' %}</span>
                  </div>
                {%- endif -%}
              </div>
            {% endfor %}
          </div>
          <div class="swiper-pagination"></div>
        </div>
      </div>
    </div>
  </div>
</div>

{% javascript %}
(function() {
  var $url = document.querySelector('.as-media-quotes-script')
  if (!window.mediaCards && $url && $url.dataset.designMode !== 'yes') {
    window.mediaCards = $url.value

    var $script = document.createElement('script')
    $script.src = window.mediaCards
    $script.defer = "defer"
    document.body.appendChild($script)
  }
})()
{% endjavascript %}

{% schema %}
{
  "name": "Media quotes",
  "class": "media-quotes",
  "tag": "section",
  "settings": [
    {
      "type": "checkbox",
      "id": "auto_rotate_slides",
      "label": "Auto-rotate slides",
      "default": false
    },
    {
      "type": "range",
      "id": "change_slides_every",
      "label": "Change slides every",
      "unit": "s",
      "min": 1,
      "max": 10,
      "step": 1,
      "default": 8,
      "info": "Only work when active auto-rotate."
    },
    {
      "type": "select",
      "id": "background_color",
      "label": "Background color",
      "options": [
        {
          "value": "primary",
          "label": "Primary"
        },
        {
          "value": "secondary",
          "label": "Secondary"
        },
        {
          "value": "inverse",
          "label": "Inverse"
        },
        {
          "value": "white",
          "label": "White"
        },
        {
          "value": "black",
          "label": "Black"
        }
      ],
      "default": "white"
    },
    {
      "type": "checkbox",
      "id": "add_background_color_to_the_full_section",
      "label": "Add background color to the full section",
      "default": false
    },
    {
      "type": "select",
      "id": "text_colors",
      "label": "Text colors",
      "options": [
        {
          "value": "white",
           "label": "White"
        },
        {
          "value": "black",
          "label": "Black"
        }
      ],
      "default": "black"
    }
  ],
  "blocks": [
    {
      "type": "quote",
      "name": "Quote",
      "settings": [
        {
          "type": "image_picker",
          "id": "logo",
          "label": "Logo"
        },
        {
          "type": "text",
          "id": "text",
          "label": "Text"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Media quotes",
      "blocks": [
        {
          "type": "quote"
        },
        {
          "type": "quote"
        },
        {
          "type": "quote"
        }
      ]
    }
  ]
}
{% endschema %}